<template>
  <div class="my">
    <scroll :data="scrollData"
            :listen-scroll="listenScroll"
            :probe-type="probeType"
            ref="list"
            class="scroll-list ">

      <div>
        <div class="my-info"
             :class="'theme-img_'+$store.state.styleColor">

          <img @click="updateUserInfo"
               v-if='resData'
               :src="resData.userInfo.photo">

          <div @click="updateUserInfo">
            <div v-if='resData'
                 id="nickName">{{resData.userInfo.nickName}}</div>
            <div id="know-time"
                 v-if="resData&&resData.day==0">我们刚认识哦</div>
            <div id="know-time"
                 v-else-if='resData'>我们相识{{resData.day}}天啦</div>
          </div>

        </div>

        <ul class='my-cel'>
          <li @click.stop="$router.push({path:'/coupon'})">
            <div>
              <i class='iconfont icon-yhq-'
                 :class="['icon_'+$store.state.styleColor]"></i>优惠劵
            </div>
            <i class='mint-toast-icon mintui  mintui-back'></i>
          </li>
          <li @click="isPopCash=true"
              v-if='$store.state.userCash'>
            <div>

              <i class='iconfont icon-hongbao-'
                 :class="['icon_'+$store.state.styleColor]"></i>
              我的钱包</div>
            <i class='mint-toast-icon mintui  mintui-back'></i>
          </li>

          <li @click="activate=true">
            <div>
              <i class='iconfont icon-weixingongzhonghaogu'
                 :style='{"color":"#10C339"}'></i>公众号{{$store.userCash}}
            </div>
            <i class='mint-toast-icon mintui  mintui-back'></i>
          </li>

        
        </ul>
      </div>  
    </scroll>
    <attention v-model='activate' />
    <popCash v-model='isPopCash'></popCash>
  </div>
</template>

<script type="text/ecmascript-6">

 
import { MessageBox } from 'mint-ui'
import { findUserInfo, updateUserInfo } from '@/api'
import Scroll from '@/components/Scroll/';
export default {
  data () {
    return {
      resData: '',
      scrollData: [],
      activate: false,
      popupVisible: false,
      isPopCash: false,
    }
  },
  components: {
    attention: () => import('@/components/Attention'),
    popCash: () => import('@/views/Home/popCash'),
    Scroll,
  },
  created () {
    this.probeType = 3
    this.listenScroll = true
    this.getFindFindUserInfo();
  },
  mounted () {
    this.$refs.list.$el.style.top = 0;
  },
  methods: {
    tiao () {
      this.$router.push({ path: "/order" });
    },
    getFindFindUserInfo () {
      this.loading.open('加载中...');
      findUserInfo().then(res => {

        if (res) {
          this.resData = res;
          this.scrollData = [res];
        }
        this.loading.close();
      })
    },

    updateUserInfo () {
      let vueThis = this;
      MessageBox.confirm('更新用户信息?').then(action => {
        updateUserInfo().then(res => {

          this.getFindFindUserInfo();

        })
      });
    },



  }
}
</script>

<style scoped lang="scss">
@import "@/common/scss/mixin.scss";
.my {
  line-height: 42px;
}
.my-info {
  height: 246px;
  width: 100%;
  @include fjc(center, flex-start);
  img {
    margin-left: 30px;
    width: 150px;
    height: 150px;
    border-radius: 100%;
  }
  > div {
    padding-left: 30px;
    #nickName {
      font-size: 34px; /*px*/
      color: #030303;
      padding-bottom: 10px;
      text-align: left;
      letter-spacing: -0.82px;
    }
    #know-time {
      font-size: 24px; /*px*/
      color: #333;
      letter-spacing: 0;
    }
  }
}
.my-cel {
  li {
    height: 96px;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    @include border-bottom;
 
    > div {
      @include fjc;
      font-size: 28px; /*px*/
      i {
        position: relative;
        top: -4px;
        font-size: 45px;
        margin-right: 15px;
      }
    }
    > i {
      font-size: 26px;
      transform: rotate(-180deg);
      color: #999;
    }
  }
  li:last-child {
    &::before {
      border: none;
    }
  }
}
</style>
